<template>
	<view class="content">
		<view :class="show ? 'fade-in' : 'fade-out'">
			<block v-for="(item,index) in list" :key="index">
				<view class="lists" @click="gouser(item.id)">
					<view class="order tn-flex tn-flex-col-center tn-flex-row-between">
						<text class="time">{{item.create_time}}</text>
						<text class="state">{{setStatus(item.status)}}</text>
					</view>
					<view class="list">
						<view class="name-price tn-flex tn-flex-col-center tn-flex-row-between">
							<text class="name">{{item.game_name}}</text>
							<view class="price">
								<text class="p1">{{item.min_price}}-{{item.max_price}}海豚币</text>
								<text class="p2">/局</text>
							</view>
						</view>
						<view class="tag tn-flex tn-flex-col-center">
							<view class="sex" :class="[{'girl':item.sex == 2}]">
								<image src="/static/index/nan.png" v-if="item.sex == 1" class="nan-icon" mode="">
								</image>
								<image src="/static/index/nv.png" v-if="item.sex == 2" class="nv-icon" mode=""></image>
								<text class="t1">{{item.sex == 1 ? '男' : '女'}}</text>
							</view>
							<!-- <view class="grading">玩家段位:白银</view> -->
						</view>
						<block v-for="(e,i) in item.tags" :key="i">
							<view class="introduce">{{e.name}}：{{e.option}}</view>
						</block>

						<view class="introduce">派单时间：{{item.exp_date}}</view>
						<view class="btn tn-flex tn-flex-row-right" v-if="item.status != 1">
							<text>服务详情</text>
						</view>
						<view class="btn tn-flex tn-flex-row-right" v-if="item.status == 1">
							<text @click.stop="cancel(item.id)">取消服务</text>
						</view>
					</view>
				</view>
			</block>
			<w-load-more ref="wLoadMore"></w-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				list: [],
				show:false
			};
		},
		onLoad() {
			this.getList(1)
		},
		onReachBottom() {
			if (this.list.length < 20) return
			this.$refs['wLoadMore'].setLoading()
			this.page++
			this.getList()
		},
		computed: {
			setStatus() {
				return function(val) {
					return val == 1 ? '进行中' : val == 2 ? '已取消' : '已结束'
				}
			}
		},
		methods: {
			async getList(loading) {
				try {
					let result = await this.$request({
						loading,
						method: 'post',
						url: '/api/play_matching/user_matching',
						data: {
							page: this.page
						}
					})
					console.log(result)
					let data = result.data.data.data
					if (this.page == 1) {
						this.list = data
						this.show = true
					} else {
						this.list = this.list.concat(data)
						this.$refs['wLoadMore'].setNomore()
						if (data.length == 0) {
							this.page--
						}
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 取消约玩
			async cancel(play_matching_id) {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/play_matching/user_cancel',
						data: {
							play_matching_id
						}
					})
					console.log(result)
					this.msg(result.data.msg)
					this.page = 1
					this.getList()
				} catch (e) {
					this.msg(e.data.msg)
					//TODO handle the exception
				}
			},
			gouser(id) {
				uni.navigateTo({
					url: "/playcenterPage/my-about-user?id=" + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 24rpx 30rpx;

		.lists:nth-last-child(2) {
			margin-bottom: 0 !important;
		}

		.lists {
			margin-bottom: 24rpx;
			background: #211C37;
			border-radius: 16rpx;

			.order {
				height: 88rpx;
				border-bottom: 1px solid #343541;
				padding: 0 24rpx;

				.time {
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
				}

				.state {
					font-size: 28rpx;
					font-weight: 400;
					color: #CCCCCC;
				}
			}

			.list {
				padding: 24rpx 32rpx;

				.name-price {
					.name {
						font-size: 32rpx;
						font-weight: bold;
						color: #FFFFFF;
					}

					.price {
						font-weight: bold;

						.p1 {
							font-size: 30rpx;
							color: #FBE12B;
						}

						.p2 {
							color: #FFFFFF;
							font-size: 24rpx;
						}
					}
				}

				.tag {
					margin-top: 12rpx;

					.sex {
						width: 82rpx;
						height: 34rpx;
						background: #69B7FD;
						border-radius: 6rpx;
						text-align: center;
						line-height: 34rpx;

						.nan-icon {
							width: 16rpx;
							height: 16rpx;
							margin-right: 6rpx;
						}

						.nv-icon {
							width: 14rpx;
							height: 18rpx;
							margin-right: 6rpx;
						}

						.t1 {
							font-size: 22rpx;
							font-weight: 400;
							color: #FFFFFF;
						}
					}

					.girl {
						background-color: #FF91CF;
					}

					.grading {
						padding: 0 8rpx;
						height: 34rpx;
						text-align: center;
						line-height: 34rpx;
						background: #9D5EF4;
						border-radius: 6rpx;
						font-size: 22rpx;
						font-weight: 400;
						color: #FFFFFF;
						margin-left: 16rpx;
					}
				}

				.introduce {
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 16rpx;
				}

				.btn {
					margin-top: 24rpx;

					text {
						background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
						border-radius: 60rpx;
						padding: 10rpx 32rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
		}




	}
</style>